<template>
	<div class="mui-numbox" data-numbox-min='1'>
	     <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
	     <input class="mui-input-numbox" type="number" value="1" ref="numbox" @change="countChanged"/>
	     <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.min.js'
	export default{
		mounted(){
			mui('.mui-numbox').numbox().getValue()
		},
		methods:{
			countChanged(){
				//console.log(this.$refs.numbox.value);
				this.$emit("getcount",this.$refs.numbox.value)
			}
		},
		props:["max"],
		watch:{
			'max':function(newVal,oldVal){
				mui('.mui-numbox').numbox().setOption('max',newVal)
			}
		}
	}
</script>

<style>
</style>
